<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>红色音乐文化基因站</title>
		<link type="text/css" rel="stylesheet" href="./index.css">
		<link rel="stylesheet" href="./swiper.min.css">
	</head>

	<body>
		<div class="wapper">
			<div class="topBar">
				<div class="center">
					<div class="logo">
						<img src="./static/logo.png" alt="">
					</div>
					<div class="menu">
						<div class="menu_item">首页</div>
						<div class="menu_item down">专题</div>
						<div class="menu_item down">目录浏览</div>
						<div class="menu_item">合作伙伴</div>
						<div class="menu_item">关于我们</div>
					</div>
					<div class="serch">
						<input type="text" placeholder="搜索专辑、单曲、视频、图片">
						<img class="serch_png" src="./static/serch.png" alt="">
					</div>
				</div>
			</div>
			<div class="swipper">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="./static/banner/1.png" alt="" />
						</div>
						<div class="swiper-slide">
							<img src="./static/banner/2.png" alt="" />
						</div>
						<div class="swiper-slide">
							<img src="./static/banner/3.png" alt="" />
						</div>
						<div class="swiper-slide">
							<img src="./static/banner/4.png" alt="" />
						</div>
						<div class="swiper-slide">
							<img src="./static/banner/5.png" alt="" />
						</div>
						<div class="swiper-slide">
							<img src="./static/banner/6.png" alt="" />
						</div>
						<div class="swiper-slide">
							<img src="./static/banner/7.png" alt="" />
						</div>
						<div class="swiper-slide">
							<img src="./static/banner/8.png" alt="" />
						</div>
						<div class="swiper-slide">
							<img src="./static/banner/9.png" alt="" />
						</div>
						<div class="swiper-slide">
							<img src="./static/banner/10.png" alt="" />
						</div>
						<div class="swiper-slide">
							<img src="./static/banner/11.png" alt="" />
						</div>
						<div class="swiper-slide">
							<img src="./static/banner/12.png" alt="" />
						</div>
						<div class="swiper-slide">
							<img src="./static/banner/13.png" alt="" />
						</div>
					</div>
					<div class="swiper-button-next"></div>
					<div class="swiper-button-prev"></div>
				</div>
				<div class="botttt">
					<div class="botttt_item">
						<span> 人工智能技术应用 </span>
						<div class="bott_item_hidd">
							<span>GIS空间信息系统</span>
							<span>VR系统</span>
							<span>全息影像应用</span>
							<span>智慧学习库</span>
						</div>
					</div>
					<div class="botttt_item">
						<span> 周边产品设计与制作 </span>
						<div class="bott_item_hidd">
							<span>红色云游风光展示</span>
							<span>红色联合文创品展示</span>
							<span>红色动漫展示</span>
						</div>
					</div>
					<div class="botttt_item">
						<span> 红色音乐作品收集 </span>
						<div class="bott_item_hidd">
							<span>音乐剧</span>
							<span>民族歌剧</span>
							<span>舞台剧</span>
							<span>创作歌曲</span>
							<span>经典民歌</span>
						</div>
					</div>
					<div class="botttt_item">
						<span> 红色理论文献合 </span>
						<div class="bott_item_hidd">
							<span>革命故事</span>
							<span>创作背景</span>
							<span>和声技法</span>
							<span>曲式结构</span>
							<span>谱例展示</span>
						</div>
					</div>

				</div>
			</div>
			<div class="main ">
				<div class="main_cneter">
					<div class="line">
						<div class="line_top">
							<div class="leftBox">
								<div class="redSeccc"></div>
								<div>专题</div>
							</div>
							<div class="rightBox">
								更多 <span> &gt </span>
							</div>
						</div>
						<div class="line_bottom">
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/01.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/02.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 歌剧—洪湖赤卫队 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/03.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 民歌·民乐 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/04.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 女声独唱经典红歌合辑 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/05.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 百佳数字出版精品项目 · 献礼建党百年专栏 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/06.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'>劳动者之歌 </div>
							</div>
						</div>
					</div>
					<div class="line">
						<div class="line_top">
							<div class="leftBox">
								<div class="redSeccc"></div>
								<div>专辑</div>
							</div>
							<div class="rightBox">
								更多 <span> &gt </span>
							</div>
						</div>
						<div class="line_bottom">
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/11.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/12.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/13.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/14.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/15.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/16.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
						</div>
					</div>
					<div class="line" style="margin-bottom: 0; padding-bottom:80px ;">
						<div class="line_top">
							<div class="leftBox">
								<div class="redSeccc"></div>
								<div>条目</div>
							</div>
							<div class="rightBox">
								更多 <span> &gt </span>
							</div>
						</div>
						<div class="line_bottom">
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/21.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/16.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/16.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/16.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/16.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
							<div class="line_bottom_item">
								<div class="aaa">
									<img class="ffff" src="./static/center/16.png" alt="" />
									<img class="loooog" src="./static/redLogo.png" alt="" />
								</div>
								<div class='adsasdasd'> 纪念聂耳逝世86周年 </div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="footercenter">
					<div class="foot_top">
						<div class="fot_tp_left">
							华韵文化 &nbsp; | &nbsp; 中国音网 &nbsp; | &nbsp; 版权信息 &nbsp; | &nbsp; 联系我们
						</div>
						<!-- 	<div class="fot_tp_left">
							华韵文化 | 中国音网 | 版权信息 | 联系我们
						</div> -->
					</div>
					<div class="LINeeee"></div>
					<div class="foot_bottom">
						<div class="leeeeff">
							京ICP备17020467号 京网文〔2020〕4369-781号 京公网安备11010502039356号 计算机软著登记书 <br />
							中关村高新技术企业 实用新型专利证书 WAF认证 高新技术企业 中国版权协会常务理事单位
						</div>
						<div class="roggg">
							Copyright © 2019 华韵文化
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="./swiper.min.js"></script>
		<!-- Initialize Swiper -->
		<script>
			var swiper = new Swiper('.swiper-container', {
				autoplay: true,
				effect: 'fade',
				loop: true,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',

				},
			});
		</script>
	</body>
</html>